<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>javascript 阶段</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: #ccc;
            position: absolute;
        }
    </style>
</head>
<body>
    

    <script>
        // 有多少组数据 ？
        // 把这些数据(x,y,color)记录在函数作用域当中,他们就是私有的数据
        // 这些数据就不会产生冲突

        // 定义函数 f1 
        var f1 = function(){
            var x = 0;
            var y = "100px";
            var color = "orange";
            var str = "<div style='left:"+x+"; top:"+y+";background:"+color+";'></div>"
            document.write(str);
        }
        f1();

        // 定义函数 f2 
        var f2 = function(){
            var x = "100px";
            var y = "200px";
            var color = "green";
            var str = "<div style='left:"+x+"; top:"+y+";background:"+color+";'></div>"
            document.write(str);
        }
        f2();

        // 定义函数 f3 
        var f3 = function(){
            var x = "200px";
            var y = "300px";
            var color = "deepskyblue";
            var str = "<div style='left:"+x+"; top:"+y+";background:"+color+";'></div>"
            document.write(str);
        }
        f3();


        // 定义函数 f3
        var f4 = function(){
            var x = "300px";
            var y = "400px";
            var color = "purple";
            var str = "<div style='left:"+x+"; top:"+y+";background:"+color+";'></div>"
            document.write(str);
        }
        f4();


    </script>
</body>
</html>